<template>
	<div>
		<div class="pb30 plr30">
			<div class="text-center border-bottom pt20 relative" style="padding-bottom: 22px;">
				<span class="fb mr20">订单记录</span>
				<div class="year">
					<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
						<el-form-item label="年份" prop="year" style="margin-bottom: 0;">
							<el-date-picker size="large" v-model="year" type="year" placeholder="请选择" @change="changeTime" />
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="pt20 pb10">
				<el-table :data="tableData" style="width: 100%" 
					:cell-style="{ textAlign: 'center','line-height':'54px'}"
					:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }">
					<el-table-column prop="customerName" label="客户姓名" />
					<el-table-column prop="orderTotalAmount" label="订单金额" />
					<el-table-column prop="orderSatus" label="审批状态">
						<template v-slot="scope">
							<div class="flex col-center row-center"
							:class="activeStatus(scope.row.orderStatus)"
							>
								<span class="drop"></span>
								<dict-tag :options="bus_order_status" :value="scope.row.orderStatus" />
							</div>
						</template>
					</el-table-column>
					<!-- 全款的话就显示全款金额，定金的话就显示定金金额+回款金额 -->
					<el-table-column label="已回款金额" align="center">
						<template v-slot="scope">
							<div>
								<span>￥{{scope.row.receivedAmount}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="创建时间"/>
					<el-table-column fixed="right" label="操作" align="center" width="300px" class-name="small-padding fixed-width">
					   <template #default="scope">
					      <el-button link class="linkBtnColor" type="primary" 
						  @click="orderDetail(scope.row)"
						 >详情</el-button>
					   </template>
					</el-table-column>
				</el-table>
			</div>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" />
		</div>
		<task-handle ref="taskHandler" :header="-1" @taskSubmitEvent="handleQuery"></task-handle>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	//订单记录
	import { orderRecord,
	} from '@/api/business/customer'
	import {
		findProcess,//查询业务流程
	} from "@/api/business/order";
	import TaskHandle from "@/views/flyflow/components/task/handler/task.vue"
	export default {
		props:{
			customerTypeProps:{
				type:Object,
				default:{}
			},
			activeName:{
				type:String,
				default:''
			}
		},
		components:{
			TaskHandle
		},
		data() {
			return {
				total:10,
				year:'',
				bus_order_status: this.useDict('bus_order_status').bus_order_status,
				queryParams: {
					pageNum:'',
					pageSize:'',
					year: '',
					id:this.customerTypeProps.userId
				},
				tableData: [ ],
			}
		},
		watch:{
			activeName(val){
				console.log(val,'val====')
				if(val == 'message5'){
					this.orderRecord()
				}
			}
		},
		mounted() {
			
		},
		methods: {
			changeTime(e){
				const date = new Date(Date.parse(e));
				const year = date.getFullYear();
				this.queryParams.year = year
				this.orderRecord()
			},
			orderRecord(){
				orderRecord(this.queryParams).then(res=>{
					this.tableData = res.rows
					this.total = res.total
				})
			},
			handleQuery() {
				
			},
			orderDetail(value){
				let data = {
					processId:value.processNumber
				}
				findProcess(data).then(res=>{
					let row = res.data
					// let data1 = {
					// 	taskId: value.processNumber
					// }
					this.$refs.taskHandler.deal(row)
				})
			}
		}
	}
</script>

<style>
	.year {
		position: absolute;
		right: 0;
		bottom: 10px;
	}
</style>